<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tpshop-首页</title>
    <link rel="stylesheet" href="./css/shouye.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
	
	
   <!-- 页面头部 -->
   <div class="index-top">
   </div>
   
    <!-- 功能 start -->
    <div class="fon">
        <ul class="ul5">
            <li>
                <span>商品推荐</span>
            </li>
            <li>
                <span>手机/运营商/数码</span>
                <span>手机通讯</span>
            </li>
            <li>
                <span>店装</span>
            </li>
            <li>
                <span>电脑/办公</span>
                <span>整机</span>
            </li>
            <li>
                <span>图书/音像/电子书</span>
                <span>少儿频道</span>
            </li>
            <li>
                <span>家具/家居/家装/厨具</span>
            </li>
            <li>
                <span>美妆个护/保健品</span>
                <span>香水彩妆</span>
            </li>
            <li>
                <span>男鞋/运动/户外</span>
                <span>户外鞋服</span>
            </li>
            <li>
                <span>食品/酒类/生鲜/特产</span>
            </li>
            <li>
                <span>家用电器</span>
                <span>电视</span>
                <span>生活电器</span>
            </li>
            <li>
                <span>配饰相关</span>
            </li>
            <li>
                <span>虚拟商品</span>
                <span>网站会员类</span>
            </li>
            <li>
                <span>医药保健/计生情趣</span>
            </li>
            <li>
                <span>水果</span>
            </li>
        </ul>
        <div class="cont">
            <div class="item">
            <div class="imgbox">
                <img src="./img/a1.jpg" alt="">
                <img src="./img/a2.jpg" alt="">
                <img src="./img/a3.jpg" alt="">
                <img src="./img/a4.jpg" alt="">
                <img src="./img/a1.jpg" alt="">
            </div>
            <div class="btns">
                <input type="button" class="left" value="<">
                <input type="button" class="right" value=">">
            </div>
            </div>
            <div class="item">
                <span>手机/运营商/数码</span>
                <span>手机通讯</span>
            </div>
            <div class="item">
                <span>店装</span>
            </div>
            <div class="item">
                <span>电脑/办公</span>
                <span>整机</span>
            </div>
            <div class="item">
                <span>图书/音像/电子书</span>
                <span>少儿频道</span>
            </div>
            <div class="item">
                <span>家具/家居/家装/厨具</span>
            </div>
            <div class="item">
                <span>美妆个护/保健品</span>
                <span>香水彩妆</span>
            </div>
            <div class="item">
                <span>男鞋/运动/户外</span>
                <span>户外鞋服</span>
            </div>
            <div class="item">
                <span>食品/酒类/生鲜/特产</span>
            </div>
            <div class="item">
                <span>家用电器</span>
                <span>电视</span>
                <span>生活电器</span>
            </div>
            <div class="item">
                <span>配饰相关</span>
            </div>
            <div class="item">
                <span>虚拟商品</span>
                <span>网站会员类</span>
            </div>
            <div class="item">
                <span>医药保健/计生情趣</span>
            </div>
            <div class="item">
                <span>水果</span>
            </div>
        </div>
    </div>
    <!-- 功能 end -->
    <!-- 内容 start -->
    <div class="c1">
        <div class="c2">
            <div class="c3">
                <span>精品推荐</span>
                <span>甄选优质好物</span>
            </div>
            <div class="c4">
                <img src="./img/tpshopimg/922955b4a488be3a561da4ff00b3d17a.png" alt="">
            </div>
            <dl class="dl1">
                <dt><img src="./img/tpshopimg/goods_thumb_252_0_400_400.jpg" alt=""></dt>
                <dd>【第二件减6元】优仙果陕西绿心猕猴桃奇异果15颗装大果（单果80g以上）新鲜水果 15个装</dd>
                <dd>&yen15.90</dd>
            </dl>
            <dl class="dl1">
                <dt><img src="./img/tpshopimg/goods_thumb_251_0_400_400.jpg" alt=""></dt>
                <dd>四川不知火丑橘5kg装精选大果京东生鲜水果春见丑柑丑桔橙丑八怪橘子 果径75mm以上 精品大果</dd>
                <dd>&yen49.80</dd>
            </dl>
            <dl class="dl1">
                <dt><img src="./img/tpshopimg/goods_thumb_250_0_400_400.jpg" alt=""></dt>
                <dd>宏碁acer【官方旗舰】蜂鸟FUN Plus S50 15.6英寸轻薄学生游戏基办公手提笔记本电脑 【佛系银-S50】i5-10210U/MX350 旗舰版:8G/512G SSD【六倍提速】</dd>
                <dd>&yen4499.00</dd>
            </dl>
        </div>
        <div class="c2">
            <div class="c3">
                <span>好货上新</span>
                <span>发现品质生活</span>
            </div>
            <div class="dl3">
            <dl class="dl2">
                <dt><img src="./img/tpshopimg/goods_thumb_252_0_400_400.jpg" alt=""></dt>
                <dd>【第二件减6元】优仙果陕西绿心猕猴桃奇异果15颗装大果（单果80g以上）新鲜水果 15个装</dd>
            </dl>
            <dl class="dl2">
                <dt><img src="./img/tpshopimg/goods_thumb_251_0_400_400.jpg" alt=""></dt>
                <dd>四川不知火丑橘5kg装精选大果京东生鲜水果春见丑柑丑桔橙丑八怪橘子 果径75mm以上 精品大果</dd>
            </dl>
            <dl class="dl2">
                <dt><img src="./img/tpshopimg/goods_thumb_250_0_400_400.jpg" alt=""></dt>
                <dd>宏碁acer【官方旗舰】蜂鸟FUN Plus S50 15.6英寸轻薄学生游戏基办公手提笔记本电脑 【佛系银-S50】i5-10210U/MX350 旗舰版:8G/512G SSD【六倍提速】</dd>
            </dl>
            <dl class="dl2">
                <dt><img src="./img/tpshopimg/goods_thumb_249_0_400_400.jpg" alt=""></dt>
                <dd>vivo S6 5G手机 前置3200万超清夜景自拍 4500mAh大电池 双模5G全网通手机 8GB+128GB 流光秘境</dd>
            </dl>
        </div>
        </div>
        <div class="c2">
            <div class="c3">
                <span>领卷中心</span>
                <span>买的多，省的多</span>
            </div>
        </div>
    </div>
    <ul class="ul8">
        <li><img src="./img/tpshopimg/9dd57aeb568c5bd29eec67ed1596e56e.jpg" alt=""></li>
        <li><img src="./img/tpshopimg/f18426bd3b043d306966b9fa577cb266.jpg" alt=""></li>
        <li><img src="./img/tpshopimg/657fe7db962ad68bca9efcfc44c2f13d.jpg" alt=""></li>
        <li><img src="./img/tpshopimg/8b8ac58a11731613ba732e45352d6965.jpg" alt=""></li>
    </ul>
    <div class="q1">
        <ul>
            <li>猜你喜欢</li>
            <li>YOU MAY LIKE</li>
        </ul>
        <div class="q2">
           <ul>
               <li><img src="./img/tpshopimg/goods_thumb_252_0_400_400.jpg" alt=""></li>
               <li>【第二件减6元】优仙果陕西绿心猕猴桃奇异果15颗装大果（单果80g以上）新鲜水果 15个装</li>
               <li>&yen15.9</li>
           </ul>
           <ul>
               <li><img src="./img/tpshopimg/goods_thumb_251_0_400_400.jpg" alt=""></li>
               <li>四川不知火丑橘5kg装精选大果京东生鲜水果春见丑柑丑桔橙丑八怪橘子 果径75mm以上 精品大果</li>
               <li>&yen49.8</li>
           </ul>
           <ul>
               <li><img src="./img/tpshopimg/goods_thumb_250_0_400_400.jpg" alt=""></li>
               <li>宏碁acer【官方旗舰】蜂鸟FUN Plus S50 15.6英寸轻薄学生游戏基办公手提笔记本电脑 【佛系银-S50】i5-10210U/MX350 旗舰版:8G/512G SSD【六倍提速】</li>
               <li>&yen4499.00</li>
           </ul>
           <ul>
               <li><img src="./img/tpshopimg/goods_thumb_255_0_400_400.jpg" alt=""></li>
               <li>测试点自提测试点自提测试点自提</li>
               <li>&yen1.00</li>
           </ul>
           <ul>
               <li><img src="./img/tpshopimg/goods_thumb_254_0_400_400.jpg" alt=""></li>
               <li>【第二件减6元】优仙果陕西绿心猕猴桃奇异果15颗装大果（单果80g以上）新鲜水果 15个装</li>
               <li>&yen99.00</li>
           </ul>
        </div>
    </div>
    <!-- 内容 end -->
   <!-- 页面底部 -->
   	<div class="index-bottom"></div>
    
</body>
<script src="./libs/jquery.js"></script>
<script src="./js/shouye.js"></script>
<script src="./js/xuanxiangka.js"></script>
<script src="./js/move.js"></script>
</html>
<script>

		$(".index-top").load("./public-page/head.html");
		$(".index-bottom").load("./public-page/bottom.html")

   class Banner{
        constructor(){
            this.left = document.querySelector(".left");
            this.right = document.querySelector(".right");
            this.imgbox = document.querySelector(".imgbox");

            this.width = this.imgbox.children[0].offsetWidth;
            this.len = this.imgbox.children.length;
            this.index = 0;
            this.setActive();
            this.addEvent();
        }
        setActive(){
            move(this.imgbox, {
                left: -this.index * this.width
            });
        }
        addEvent(){
            const that = this;
            this.left.onclick = function(){
                that.changeIndex(1)
            }
            this.right.onclick = function(){
                that.changeIndex(2);
            }
        }
        changeIndex(d){
            if(d === 1){
                if(this.index === 0){
                    // 无缝2-1：改索引
                    this.index = this.len-1;
                    // 无缝3-2：
                    // 设置imgbox的left为？
                }else{
                    this.index--;
                }
            }else{
                if(this.index === this.len-1){
                    // 无缝2-1：到达终点后，将索引切换成真正要显示的图片索引
                    this.index = 1;
                    // 无缝3-1：将imgbox的left设置为初始值0
                    this.imgbox.style.left = 0;
                }else{
                    this.index++;
                }
            }
            this.setActive();
        }
    }
    new Banner();
	// let b= document.querySelector('#sousuo')
	//   let so= document.querySelector('#sou')
	//   console.log(so)
	//   // window.location.href=`list.html?${b.value}`
	
	 
	// document.querySelector('#s').addEventListener('click',()=>{
	//     console.log(1234)
	//     if(b.value){
	//       window.location.href=`list.html?${b.value}`
	//     }else{
	//         alert('请输入关键字')
	//     }
	    
	// })  
	
	//点击搜索跳转到上屏列表页
	$("body").on("click","#sou",function(){
		location.assign("http://localhost:3000/list.html")
	})
	
</script>